Za pomoc¹ poni¿ej prezentowanego elementu mo¿liwe jest umieszczanie obrazków wewn¹trz dokumentu HTML.
<IMG SRC=/usr/pub/grafika/obrazek.gif>
Najwa¿niejszym atrybutem deklaracji <IMG> jest SRC. Jego wartoœæ stanowi adres pliku graficznego, który bêdzie móg³ byæ wyœwietlany w trybie inline, czyli bezpoœrednio w dokumencie. Najczêœciej stosowanym formatem graficznym jest GIF oraz, ostatnio coraz bardziej zyskuj¹cy na popularnoœci, format JPEG, który jednak obs³ugiwany jest przez nowsze przegl¹darki (na przyk³ad Netscape 2.0).
Standard HTML 2.0 wprowadzi³ dodatkowe dwa atrybuty: ALT oraz ALIGN. Przeznaczenie tego pierwszego zwi¹zane by³o z potrzeb¹ zachowania kompatybilnoœci z przegl¹darkami obs³uguj¹cymi najni¿szy, zerowy poziom jêzyka HTML, który odnosi siê do systemów pracuj¹cych jedynie w trybie tekstowym. Nazwa atrybutu ALT pochodzi od angielskiego s³owa alternative, co doœæ dobrze t³umaczy jego przeznaczenie. Zastosowanie ALT ma jednak sens dopiero w przypadku, gdy obrazek stanowi jednoczeœnie odwo³anie do innego dokumentu. Gdy grafika nie mo¿e byæ prezentowana, wyœwietlany jest alternatywny tekst, bêd¹cy wartoœci¹ atrybutu ALT.
<IMG SRC=obrazek.gif ALT=„W œrodowiskach tekstowych ten tekst wyœwietlany jest zamiast obrazka">
Za pomoc¹ atrybutu ALIGN mo¿na ustalaæ pozycjê, w której b êdzie wyœwietlany tekst otaczaj¹cy obrazek. Podobnie jak by³o to w przypadku elementu <MARQUEE> mo¿e on m.in. przybieraæ wartoœci top (góra), middle (œrodek) oraz bottom (dó³), co bêdzie powodowa³o, ¿e tekst wystêpuj¹cy zarówno przed, jak i po etykiecie <IMG> bêdzie wyœwietlany odpowiednio w wierszu pierwszym, œrodkowym lub ostatnim bezpoœrednio obok obrazka. Zastosowanie tego parametru, jak równie¿ i innych atrybutów uwidocznione zosta³o w zamieszczonym poni¿ej zrzucie ekranu (porównaj z poni¿szym przyk³adem dokumentu HTML).:
</HEAD> <BODY> <H1>Grafika w dokumentach HTML</H1> <H3>W bardzo prosty sposób obrazki mog¹ byæ bezpoœrednio umieszczane w dokumencie HTML, a tekst je otaczaj¹cy mo¿e byæ dowolnie wyrównywany dziêki atrybutowi ALIGN </H3><P> <I>TOP</I> <A HREF=dokument.htm> <IMG SRC="file:///C:/HTML/szrgb.gif" ALIGN=top> </A> <I>MIDDLE</I> <IMG SRC=" file:///C:/HTML/szrgb.gif " ALIGN=middle BORDER=2> <I>BOTTOM</I> <IMG SRC="file:///C:/HTML/szrgb.gif" ALIGN=bottom BORDER=2> <I>TOP</I> <IMG SRC="file:///C:/HTML/szrgb.gif" ALIGN=top BORDER=2> <HR> <I>LEFT</I> <IMG SRC="file:///C:/HTML/szrgb.gif" ALIGN=left BORDER=5> <I>RIGHT</I> <IMG SRC="file:///C:/HTML/szrgb.gif" ALIGN=right BORDER=5> </BODY> </HTML>
U¿yte w tym przypadku adresy obrazka (za ka¿dym razem tego samego) odwo³uj¹ siê do zasobów lokalnych, czyli wybranych plików na dysku twardym komputera, na którym zosta³ uruchomiony program przegl¹darki. W pierwszym przypadku obrazek stanowi dodatkowo odwo³anie. Przyjrzyjmy siê jeszcze bli¿ej liniom:
<A HREF=dokument.htm> <IMG SRC="file:///C:/DOCS/HTML/PROBY/szrgb.gif" ALIGN=top> </A>
Dziêki szeregowi atrybutów elementu <IMG> obrazki mog¹ mieæ ró¿n¹ postaæ i umiejscowienie na ekranie
Jak widaæ, tekst, który powinien symbolizowaæ odwo³anie do innego dokumentu, zosta³ zast¹piony deklaracj¹ elementu graficznego. W ten sposób wstawiony
obrazek staje siê przyciskiem, umieszczanym bezpoœrednio w dokumencie. Gdy kliknie siê go myszk¹, zostanie wywo³any przypisany mu dokument lub plik.
Analizuj¹c zamieszczony zrzut ekranowy, mo¿na zaobserwowaæ, ¿e w chwili, gdy mamy do czynienia z ci¹giem kilku obrazków umieszczonych w jednej linii,
ponowne u¿ycie wartoœci top atrybutu ALIGN dla ostatniego obrazka ma nieco inne znaczenie. Górna krawêdŸ tego obrazka jest bowiem wyrównywana do
najwy¿ej po³o¿onego obrazka w ci¹gu. Parametr top nie odnosi siê wiêc do tekstu, tylko do wszystkich obiektów umieszczonych przed obrazkiem, do którego
zosta³ on zastosowany.
Nietrudno zauwa¿yæ, ¿e w przyk³adzie wykorzystane zosta³y równie¿ inne wartoœci atrybutu ALIGN (left oraz right). Stanowi¹ one instrukcje jêzyka HTML
3.0 i podobnie jak kolejne opisywane atrybuty s¹ obs³ugiwane wy³¹cznie przez przegl¹darkê Netscape 2.0. Wspomniane parametry umieszczaj¹ grafikê
odpowiednio po lewej lub prawej stronie okna. Oprócz nich Netscape obs³uguje jeszcze cztery dodatkowe atrybuty:
W przypadku u¿ycia wartoœci left oraz right dla opisywanego atrybutu zaraz po deklaracji ca³ego obrazka warto umieœciæ element <BR> z atrybutem CLEAR. Po wyrównaniu do lewej wpisujemy <BR CLEAR=left>, a w drugim przypadku <BR CLEAR=right>. Powala to na oczyszczenie obszaru po boku obrazka i unikniêcie chaosu na ekranie.
Dodatkowo wprowadzonym atrybutem w naszym krótkim dokumencie jest BORDER, który okreœla gruboœæ ramki otaczaj¹cej obrazek w pikselach. W
przypadku, gdy element graficzny reprezentuje odwo³anie i atrybut ten nie zostanie jawnie u¿yty, domyœlna jego wartoœæ ustawiana jest na 2, a obwódka
wyœwietlana jest w kolorze odwo³ania (zwykle niebieskim). Nale¿y przy tym pamiêtaæ, ¿e podanie wartoœci 0 spowoduje, ¿e ramka nie bêdzie wyœwietlana w
ogóle.
Kolejnymi atrybutami s¹ WIDTH, HEIGHT, VSPACE oraz HSPACE.
Dwa pierwsze atrybuty s³u¿¹ do skalowania obrazków. Ich wartoœci mog¹ byæ podawane w formie bezwzglêdnej (liczba pikseli w postaci HEIGHT/WIDTH=n) lub wzglêdnej (w procentach w stosunku do parametrów wielkoœci okna przegl¹darki w postaci HEIGHT/WIDTH =%n). Jeœli poda siê tylko jeden z nich, to drugi obliczony zostanie automatycznie na podstawie wspó³czynnika aspect ratio danego obrazka. Dwa kolejne atrybuty stosuje siê zwykle wtedy, gdy dochodzi do sytuacji, w której zawartoœæ obrazka oraz otaczaj¹cy go tekst zaczynaj¹ siê ze sob¹ „k³óciæ" z powodu zbyt ma³ej odleg³oœci pomiêdzy nimi. Za pomoc¹ tych parametrów mo¿na ustaliæ wielkoœæ marginesów prawego i lewego (HSPACE) oraz górnego i dolnego (VSPACE), które bêd¹ stanowi³y obszary wolne od tekstu. W obu przypadkach wartoœci podaje siê wy³¹cznie w pikselach.
Ostatni¹ wprowadzon¹ w Netscape nowoœci¹ jest LOWSRC, który wydaje siê bardzo przydatny w tworzeniu dokumentów zawieraj¹cych du¿o grafiki.
Podaje siê go zawsze po atrybucie SCR, a wskazuje on na plik graficzny o mniejszej rozdzielczoœci i rozmiarze (zwykle w formacie JPEG), który jest œci¹gany w
pierwszym etapie ³adowania dokumentu. Gdy ca³y dokument bêdzie ju¿ kompletny, rozpoczynany jest drugi etap, podczas którego w miejsce „starej",
niepe³nowartoœciowej grafiki bêd¹ ju¿ ³adowane obrazki o wiêkszej rozdzielczoœci z widocznymi wszystkimi szczegó³ami (stanowi¹ce argumenty atrybutów
SRC). Oto przyk³ad:
<IMG SRC=„hires.gif" LOWSRC=„lowres.jpg">
Ostatnim, nie wymienianym wczeœniej, atrybutem elementu <IMG> jest ISMAP, któremu zosta³ poœwiêcony poni¿szy ustêp. Dziêki niemu obrazek mo¿e staæ siê pewnego rodzaju map¹ graficzn¹ umo¿liwiaj¹c¹ klikanie jej poszczególnych fragmentów. Mo¿na j¹ podzieliæ na wiele pól. Klikniêcie myszk¹ jednego z tych pól powoduje przeniesienie do dokumentu przypisanego do wybranego pola. Standardowe odwo³anie do obrazka-mapy ma nastêpuj¹c¹ postaæ:
<A HREF=http://host.domena/htbin/imagemap> <IMG SCR=mapa.gif ISMAP> </A>
Element <IMG> ma równie¿ i w tym przypadku charakter odwo³ania. Nie wskazuje on jednak na dokument HTML, lecz na tzw. imagemap. Zawiera on dane o wszystkich polach (ró¿nych kszta³tów) dziel¹cych obrazek mapa.gif i mo¿e mieæ nastêpuj¹c¹ postaæ:
DEFAULT http//host.domena/default.htm CIRCLE(20, 20) 10 http://www.w3.org
W pierwszym wierszu deklarowany jest adres, do którego przegl¹darka bêdzie siê automatycznie odwo³ywa³a w przypadku, gdy nie zostanie wybrane ¿adne pole.
Druga linia z kolei definiuje jedno z pól bêd¹cych fragmentem obrazka (w tym przypadku ko³o o œrodku w punkcie o wspó³rzêdnych 20, 20, rozpoczynaj¹c od
górnego, lewego rogu ekranu w pikselach i promieniu 10 pikseli). Gdy kursor znajdzie siê nad takim obszarem i zostanie wciœniêty przycisk myszki, wywo³ywany
jest dokument indeksowy z adresu: http://www.w3.org/. Mo¿e to jednak nast¹piæ wy³¹cznie w momencie, gdy w komputerze, na którym znajduje siê mapa, dzia³a
serwer HTTP. W innym przypadku nie nast¹pi ¿adna reakcja.
{N}Ostatnio jednak coraz bardziej odbiega siê od powy¿szego modelu i zastêpuje siê go nowszymi metodami definiowania map. Standard HTML 3.0 przewiduje
bowiem u¿ycie map bezpoœrednio w dokumentach (client side imagemap), co powoduje, ¿e do wywo³ania jakiegoœ miejsca na mapie nie potrzeba ju¿
dodatkowego kontaktowania siê z hostem udostêpniaj¹cym dany obrazek. Poza tym w linii statusowej zamiast wspó³rzêdnych kursora myszy pojawiaj¹ siê ju¿
rzeczywiste nazwy plików, do których odwo³uj¹ siê poszczególne pola. Poni¿ej przedstawiamy definicjê przyk³adowej mapy:
<MAP NAME="buttonbar"> <AREA SHAPE="RECT" COORDS="10,10,49,49" HREF="about.html"> <AREA SHAPE="RECT" COORDS="60,10,99,49" HREF="products.html"> <AREA SHAPE="RECT" COORDS="110,10,149,49" HREF="index.html"> <AREA SHAPE="RECT" COORDS="0,0,159,59" NOHREF> </MAP> <IMG SRC="../images/tech/bar.gif" USEMAP="#buttonbar">
Wszystkie potrzebne elementy, okreœlaj¹ce parametry mapy, umieszczone s¹ pomiêdzy ogranicznikami <MAP> oraz </MAP>. Ka¿da mapa musi byæ identyfikowana za pomoc¹ dowolnie wybranej nazwy (atrybut NAME w pierwszym wierszy przyk³adu). Kolejne regiony mapy opisywane s¹ z wykorzystaniem elementu <AREA> posiadaj¹cego kilka parametrów:
Ostatnia linia obrazuje sposób odwo³ania siê do zdefiniowanej mapy. Jak widaæ, jedyn¹ ró¿nic¹ w stosunku do standardowej koncepcji map graficznych jest
zastosowanie zamiast deklaracji ISMAP atrybutu USEMAP wraz ze wzglêdnym adresem, który odwo³uje siê do wczeœniej okreœlonej nazwy mapy (buttonbar).
Na koniec ma³a uwaga, dotycz¹ca grafiki: powinno siê unikaæ umieszczania w dokumentach wielu obrazków o du¿ych rozmiarach. Mo¿e to szybko doprowadziæ
u¿ytkownika przegl¹daj¹cego dany dokument do frustracji i nieprzewidzianych zachowañ, gdy jest on zmuszony do d³ugiego czekania na kompletne za³adowanie
strony.
